<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../../js/vue.min.js"></script>
    <link rel="stylesheet" href="../../elementUI/index.css">
    <script src="../../elementUI/index.js"></script>
    <script src="../../js/jquery-3.6.0.min.js"></script>
    <script src="../../js/axios.min.js"></script>
</head>

<body>
<div id="app">
    <el-breadcrumb separator="/" style="font-size: 30px">
        <el-breadcrumb-item :to="{ path: '/' }">产品管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/page/product/product-list.html">产品列表</a></el-breadcrumb-item>
    </el-breadcrumb>
    <br><br>
    <el-button type="primary" @click="dialogAddFormVisible = true">添加产品</el-button>
    <el-button type="danger" @click="deleteMore">批量删除</el-button>
    <br>
    <div style="margin-top: 15px; width: 400px">
        <el-input placeholder="请输入商品名称" v-model="inputName" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
    </div>
    <br>
    <template>
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="ID" prop="id" width="70" style="text-align: center">
            </el-table-column>
            <el-table-column label="编号" prop="productNum" width="100">
            </el-table-column>
            <el-table-column label="产品名称" prop="productName" width="200">
            </el-table-column>
            <el-table-column label="出发城市" prop="cityName" width="150">
            </el-table-column>
            <el-table-column label="出发时间" prop="departureTimeStr" width="200">
            </el-table-column>
            <el-table-column label="产品价格" prop="productPrice" width="200">
            </el-table-column>
            <el-table-column label="产品描述" prop="productDesc" width="200">
            </el-table-column>
            <el-table-column label="状态" prop="productStatusStr" width="200">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!--<el-button type="warning" icon="el-icon-search" @click="handleView(scope.$index, scope.row)"
                               circle></el-button>-->
                    <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"
                               circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)"
                               circle></el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <!--产品修改-->
    <el-dialog title="产品修改" :visible.sync="dialogEditFormVisible" width="615px">
        <el-form :model="editInfo" label-position="left" model="{
                name: '',
                region: '',
                type: ''
            }" :inline="true">

            <el-form-item label="产品编号">
                <el-input v-model="editInfo.productNum" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input v-model="editInfo.productName" style="width: 200px;"></el-input>
            </el-form-item>

            <el-form-item label="出发时间">
                <el-date-picker style="width: 200px;"
                                v-model="editInfo.departureTime"
                                type="datetime"
                                format="yyyy-MM-dd HH:mm"
                                placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="出发城市">
                <el-input v-model="editInfo.cityName" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="产品状态">
                <el-select v-model="editInfo.productStatus" style="width: 200px;">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="产品价格">
                <el-input v-model="editInfo.productPrice" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="产品描述">
                <el-input type="textarea" v-model="editInfo.productDesc" style="width: 560px;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEditFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 产品添加 -->
    <el-dialog title="产品添加" :visible.sync="dialogAddFormVisible" width="615px">
        <el-form :model="addInfo" label-position="left" model="{
                name: '',
                region: '',
                type: ''
            }" :inline="true">

            <el-form-item label="产品编号">
                <el-input v-model="addInfo.productNum" style="width: 200px;" placeholder="请输入产品编号"></el-input>
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input v-model="addInfo.productName" style="width: 200px;" placeholder="请输入产品名称"></el-input>
            </el-form-item>

            <el-form-item label="出发时间">
                <!--                    <el-input v-model="editFrom.departureTime" ></el-input>-->
                <el-date-picker style="width: 200px;"
                                v-model="addInfo.departureTime"
                                type="datetime"
                                format="yyyy-MM-dd HH:mm"
                                placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>


            <el-form-item label="出发城市">
                <el-input v-model="addInfo.cityName" style="width: 200px;" placeholder="请输入出发城市"></el-input>
            </el-form-item>
            <el-form-item label="产品状态">
                <el-select v-model="addInfo.productStatus" style="width: 200px;">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品价格">
                <el-input v-model="addInfo.productPrice" style="width: 200px;" placeholder="请输入产品价格"></el-input>
            </el-form-item>
            <el-form-item label="产品描述">
                <el-input type="addFrom" v-model="addInfo.productDesc" style="width: 560px;"
                          placeholder="请输入产品描述"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddFormVisible=false">取 消</el-button>
            <el-button type="primary" @click="addProduct">确 定</el-button>
        </div>
    </el-dialog>

    <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="count" style="width: 100%;">
        </el-pagination>
    </div>

</div>
</body>

<script>
    var obj = {
        page: 1,
        limit: 5,
        productName: ""
    };

    var v1 = new Vue({
        el: '#app',
        data: {
            inputName: "",
            tableData: [],
            currentPage: 1,
            pageSize: 5,
            count: 10,
            dialogEditFormVisible: false,
            dialogAddFormVisible: false,
            options: [{
                value: 0,
                label: '关闭'
            }, {
                value: 1,
                label: '开启'
            }],
            editInfo: {},
            addInfo: {},
            ids: {},
            array: []
        },
        methods: {
            handleEdit(index, row) {
                //console.log(index, row);
                this.dialogEditFormVisible = true;
                //this.editInfo = row;
                this.editInfo = JSON.parse(JSON.stringify(row));
                //console.log(this.editInfo);
            },
            handleDelete(index, row) {
                console.log(index, row);
                let id = row.id;
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'delete',
                        url: '/product/deleteProductJson',
                        params: {id},
                        responseType: 'json'
                    }).then(response => {
                        let res = response.data;
                        console.log(res);
                        v1.tableData = res.list;
                        v1.count = res.total;
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(err => {
                        console.log(err);
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                    });
                    v1.currentPage = 1;
                    v1.pageSize = 5;
                });
            },
            handleSizeChange(e) {
                this.currentPage = 1;
                this.pageSize = e;

                obj.page = this.currentPage;
                obj.limit = this.pageSize;
                obj.productName = this.inputName;

                axios({
                    method: 'get',
                    url: '/product/findAllJson',
                    params: obj,
                    responseType: 'json'
                }).then(response => {
                    let res = response.data;
                    //console.log(res);
                    v1.tableData = res.list;
                    v1.count = res.total;
                }).catch(err => {
                    console.log(err);
                });
            },
            handleCurrentChange(e) {
                this.currentPage = e;

                console.log("当前页码：" + this.currentPage)
                console.log("当前分页数：" + this.pageSize)

                obj.page = this.currentPage;
                obj.limit = this.pageSize;
                obj.productName = this.inputName;

                axios({
                    method: 'get',
                    url: '/product/findAllJson',
                    params: obj,
                    responseType: 'json'
                }).then(response => {
                    let res = response.data;
                    v1.tableData = res.list;
                    v1.count = res.total;
                }).catch(err => {
                    console.log(err);
                });
            },
            handleSelectionChange(val) {
                //console.log(val);
                for (let i in val) {
                    //console.log(val[i].id);
                    this.array[i] = val[i].id;
                }
                console.log(this.array);
                this.ids = this.array;
                console.log("====>" + this.ids);
            },
            update() {
                axios({
                    method: 'put',
                    url: '/product/editJson',
                    data: this.editInfo,
                    responseType: 'json'
                }).then(response => {
                    //console.log(response);
                    let res = response.data;
                    v1.tableData = res.list;
                    v1.count = res.total;
                }).catch(err => {
                    console.log(err);
                })
                v1.currentPage = 1;
                v1.pageSize = 5;
                v1.dialogEditFormVisible = false;
            },
            addProduct() {
                //console.log(this.addInfo);
                axios({
                    method: 'post',
                    url: '/product/addProductJson',
                    data: this.addInfo,
                    responseType: 'json'
                }).then(response => {
                    console.log(response);
                    let res = response.data;
                    v1.tableData = res.list;
                    v1.count = res.total;
                }).catch(err => {
                    console.log(err);
                })
                v1.currentPage = 1;
                v1.pageSize = 5;
                this.dialogAddFormVisible = false;
                this.addInfo = {};
            },
            search() {
                obj.productName = this.inputName;
                //console.log(obj);
                axios({
                    method: 'get',
                    url: '/product/findAllJson',
                    params: obj,
                    resultType: 'json'
                }).then(response => {
                    let res = response.data;
                    //console.log(res);
                    v1.tableData = res.list;
                    v1.count = res.total;
                }).catch(error => {
                    console.log(error);
                })
            },
            /**
             * handleDelete(index, row) {
             *                 console.log(index, row);
             *                 let id = row.id;
             *                 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
             *                     confirmButtonText: '确定',
             *                     cancelButtonText: '取消',
             *                     type: 'warning'
             *                 }).then(() => {
             *                     axios({
             *                         method: 'delete',
             *                         url: '/product/deleteProductJson',
             *                         params: {id},
             *                         responseType: 'json'
             *                     }).then(response => {
             *                         let res = response.data;
             *                         console.log(res);
             *                         v1.tableData = res.list;
             *                         v1.count = res.total;
             *                         this.$message({
             *                             type: 'success',
             *                             message: '删除成功!'
             *                         });
             *                     }).catch(err => {
             *                         console.log(err);
             *                     });
             *                     v1.currentPage = 1;
             *                     v1.pageSize = 5;
             *                 });
             *             },
             */
            deleteMore() {
                axios({
                    method: 'delete',
                    url: '/product/deleteProductsJson',
                    data: {ids: this.ids},
                    responseType: 'json'
                }).then(response => {
                    //console.log(response);
                    /*let res = response.data;
                    v1.tableData = res.list;
                    v1.count = res.total;*/
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch()
            }
        }
    });

    /*axios({
        url: '/product/findAllJson',
        method: 'get',
        data: obj,
        resultType: 'json'
    }).then(response => {
        //console.log(response)
        let res = response.data;
        //console.log(res);
        v1.tableData = res.list;
        v1.count = res.total;
    }).catch(error => {
        console.log(error);
    })*/

    v1.search();
</script>
</html>